<template>
  <div class="box">
    <el-container>
      <el-header class="header" style="height: auto">
        <div class="header-left">
          <div class="project-title">
            申港社区临港家园海绵化改造工程-总包 （2017SH481EC）
          </div>
          <div>
            <el-tabs
              v-model="tabName"
              type="card"
              @tab-click="headerTab(tabName)"
            >
              <el-tab-pane label="项目信息" name="projectInfo"></el-tab-pane>
              <el-tab-pane label="项目工作" name="job"></el-tab-pane>
              <el-tab-pane
                label="商务信息"
                name="commercialMessage"
              ></el-tab-pane>
              <el-tab-pane
                label="项目供应商"
                name="projectSuppliers"
              ></el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="header-right">
          <el-badge is-dot class="item"
            ><span class="bad">项目动态</span>
          </el-badge>
        </div>
      </el-header>
      <div>
        <job v-if="tabName == 'job'"></job>
        <project-suppliers
          v-if="tabName == 'projectSuppliers'"
        ></project-suppliers>
        <project-info v-if="tabName == 'projectInfo'"></project-info>
        <commercial-message
          v-if="tabName == 'commercialMessage'"
        ></commercial-message>
      </div>
    </el-container>
  </div>
</template>
<script>
import job from "./components/job";
import projectSuppliers from "./components/projectSuppliers";
import projectInfo from "./components/projectInfo";
import commercialMessage from "./components/commercialMessage";
export default {
  data() {
    return {
      tabName: "projectInfo",
    };
  },
  methods: {
    onSubmit() {},
    headerTab(val, event) {
      this.tabName = val;
    },
  },
  mounted() {},
  computed: {},
  components: {
    job,
    projectSuppliers,
    projectInfo,
    commercialMessage,
  },
};
</script>
<style lang="scss" scoped>
.box {
  background: #f0f2f5;
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    .header-left {
      flex: 1;
      .project-title {
        padding: 13px 0 23.5px;
        height: 13px;
        font-size: 9px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #252525;
        line-height: 13px;
      }
    }
    .header-right {
      justify-content: right;
      align-items: end;
    }
    .item {
      background: #28528d;
      border-radius: 50%;
      padding: 5px;
      .bad {
        width: 30px;
        color: #fff;
        font-size: 12px;
        display: inline-block;
        text-align: center;
      }
    }
  }
  .main {
    display: flex;
    padding: 0 20px;
    .main-left {
      flex: 1;
      width: 100%;
      margin-right: 20px;
      .card-header {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        .card-left {
          margin-left: 120px;
          flex: 1;
        }
        .card-right {
          text-align: right;
          flex: 1;
          margin-right: 20px;
        }
      }
      .card-content {
        .list-item {
          width: 93%;
          // height: 120px;
          background: #ffffff;
          border: 1px solid #28528d;
          border-radius: 5px;
          padding: 0 15px;
          margin: 15px 0 0 0;
          display: inline-block;
          .item-top {
            display: flex;
            align-items: center;
            margin-top: 15px;
            .item-num {
              font-size: 9px;
            }
            .item-type {
              font-size: 9px;
              flex: 1;
              margin-left: 10px;
            }
            .item-count {
              width: 30px;
              height: 30px;
              font-size: 12px;
              border: 2px solid #ccc;
              border-radius: 50%;
              text-align: center;
              line-height: 30px;
            }
          }
          .item-text {
            font-size: 6px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #252525;
            margin: 10px 0;
          }
          .item-manager {
            font-size: 4px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #696969;
            margin: 10px 0;
          }
          .item-line {
            border-bottom: 1px dashed #979797;
          }
          .item-tag {
            font-size: 6px;
            color: #252525;
            line-height: 26px;
            .bg {
              width: 8px;
              height: 4px;
              background: #252525;
              display: inline-block;
              vertical-align: middle;
            }
            .tag-rig {
              margin-right: 5px;
            }
          }
        }
      }
    }
    .main-right {
      width: 320px;
      .history {
        text-align: center !important;
        .btn {
          background: #28528d;
        }
      }
    }
  }
}

.img1 {
  width: 100px;
  height: 100px;
  background: url("~@/assets/img/01.png") center center no-repeat;
  background-size: 100px auto;
}

.el-icon-my-sus {
  background: url("~@/assets/img/01.png") center no-repeat;
  /* background-size: cover;*/
}
.el-icon-my-sus:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}

.el-icon-my-sus {
  font-size: 16px;
}
.el-icon-my-sus:before {
  content: "\e611";
}
/deep/.el-timeline-item__icon {
  color: #fff;
  font-size: 20px;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  // border-bottom-color: #FFF;
  background: #fff;
}
/deep/.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0;
}
/deep/.el-tabs__item.is-active {
  color: #28528d;
}
/deep/.el-tabs__item:hover {
  color: #28528d;
  cursor: pointer;
}

/deep/ .el-timeline-item__node--large {
  left: -8px;
  width: 26px;
  font-size: 16px;

  height: 26px;
}
/deep/.el-tabs__item {
  font-size: 12px !important;
}
/deep/.el-button + .el-button {
  margin-left: -2px;
}
/deep/ .el-step__title {
  font-size: 7px;
}
/deep/ .el-form-item__label {
  font-size: 7px;
  font-family: PingFang-SC-Heavy;
  color: #252525;
}
/deep/ .el-tabs--left .el-tabs__header.is-left {
  float: left;
  margin-bottom: 0;
  margin-right: 30px;
}
</style>